<template>
  <div>
    <el-table border stripe :data="queryList" style="width: 100%" height="50vh">
      <el-table-column prop="id" label="ID" width="100" />
      <el-table-column prop="adcode" label="代码" />
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="jibie" label="级别" />
      <el-table-column label="操作" width="150">
        <!-- 接口缺失 -->
        <el-link type="primary">修改</el-link>
        <el-link type="danger">删除</el-link>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="pages.page"
      :page-sizes="[10, 15, 20, 25]"
      :page-size="pages.listRows"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { data1Api } from '@/api/UnderlyingData'
export default {
  data() {
    return {
      height: (window.innerHeight) * 0.65,
      // 数据请求
      pages: {
        page: 1,
        listRows: 10
      },
      total: null,
      queryList: []
    }
  },
  created() {
    this.getdata1Api()
  },
  methods: {
    // 主体数据
    async getdata1Api() {
      const res = await data1Api(this.pages)
      this.total = res.count - 0
      this.queryList = res.data
      this.queryList.forEach((item) => {
        if (item.grade === 'nation') {
          item.jibie = 0
        } else if (item.grade === 'province') {
          item.jibie = 1
        } else if (item.grade === 'city') {
          item.jibie = 2
        } else {
          item.jibie = 3
        }
      })
    },
    // 分页逻辑
    handleSizeChange(newSize) {
      this.pages.listRows = newSize
      this.getdata1Api()
    },
    handleCurrentChange(newNum) {
      this.pages.page = newNum
      this.getdata1Api()
    }
  }
}
</script>

<style lang="scss" scoped>
.el-link {
  margin-right: 10px;
}
.el-pagination {
  margin-top: 20px;
}
</style>
